// 学籍模板文件管理

<template>
    <div>
        <el-card shadow="never" body-style="padding: 24px;">
            <h1 class="condition-title">学籍相关模板文件</h1>
            <div class="sub-title">
                <div class="float-right" style="display: flex">
                    <!-- 新增 -->
                    <el-button type="primary" @click="addFile()" v-if="ifAdminAdd">新增</el-button>
                </div>
                <br />
            </div>

            <el-table :pagination="false" :data="dataList" size="mini" tooltip-effect="light">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column
                    label="模板文件"
                    tooltip-effect="light"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <el-button type="text" @click="downFile(scope.row)">
                            {{ scope.row.fileName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="说明" prop="remark" tooltip-effect="light" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="上传人" prop="uploadUser"></el-table-column>
                <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
                <el-table-column label="终端IP" prop="uploadIp"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editFile(scope.row)" v-if="ifAdminEdit">编辑</el-button>
                        <el-button type="text" @click="delFile(scope.row)" v-if="ifAdminDel">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float: right; margin-top: 10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
            title="新增"
            :visible.sync="dialogTableVisible"
            width="500px"
            :close-on-click-modal="false"
        >
            <el-upload
                class="upload-demo"
                ref="upload"
                action="/api/studentservice/templateFile/editTemplate"
                :on-remove="handleRemove"
                :before-upload="beforeUpload"
                :on-error="handleError"
                :on-success="handleSuccess"
                :auto-upload="false"
                :on-change="handleChange"
                :data="uploadParams"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
            >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xls、xlsx、doc、docx、pdf等文件。</div>
            </el-upload>

            <div style="margin-top: 25px" class="demo-input-suffix">
                <div style="float: left">
                    <span style="bottom: 30px; font-size: 14px">说明：</span>
                </div>
                <div>
                    <el-input
                        type="textarea"
                        style="width: 90%"
                        show-word-limit
                        :rows="4"
                        placeholder="请输入内容"
                        maxlength="256"
                        v-model="textarea"
                    ></el-input>
                </div>
            </div>
            <div style="height: 25px; margin-top: 20px">
                <el-button type="primary" style="float: right" @click="makeSure()">确定</el-button>
                <el-button
                    type="primary"
                    style="float: right; margin-right: 20px"
                    @click="dialogTableVisible = false"
                >
                    取消
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {delTemplate, listTemplate, editRemark } from 'common/src/api/studentinfo'
import stu from 'common/src/api/studentinfo'
import templateBaseInfo from '../../culture/bachelor/templateBaseInfo.vue'
export default {
    components: { templateBaseInfo },
    data() {
        return {
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                total_: 0,
            },
            submitType: '',
            textarea: '',
            dataList: [],
            fileList: [],
            ifAdminAdd: false,
            ifAdminEdit: false,
            ifAdminDel: false,
            fileChange: false,
            dialogTableVisible: false,
            uploadParams: {
                remark: '',
                id: '',
                fileUrl: '',
            },
        }
    },
    created() {
        this.getListData()
        let auths = []
        if (localStorage.getItem('sessiondata')) {
        if (JSON.parse(localStorage.getItem('sessiondata')).auths) {
                 auths = JSON.parse(localStorage.getItem('sessiondata')).auths
                 if (auths && Array.isArray(auths) && auths.length > 0) {
                    auths.some(item => {
                        if (item.authCode === 'files-manage-ifadminAdd') {
                            this.ifAdminAdd = true
                        }
                        if (item.authCode === 'files-manage-ifadminEdit') {
                            this.ifAdminEdit = true
                        }
                        if (item.authCode === 'files-manage-ifadminDel') {
                            this.ifAdminDel = true
                        }
                    })
                 }
            }
        }

    },
    methods: {
        editFile(row) {
            this.fileList = []
            this.dialogTableVisible = true
            this.submitType = 'edit'
            this.fileChange = false
            this.fileList = [
                {
                    name: row.fileName,
                    fileUrl: row.fileUrl,
                },
            ]
            this.textarea = row.remark
            this.uploadParams.id = row.id
            this.uploadParams.fileUrl = row.fileUrl
        },
        delFile(row) {
            this.$confirm('确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                delTemplate({
                    id: row.id,
                    fileUrl: row.fileUrl,
                }).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                        })
                        this.getListData()
                    }
                })
            })
        },  
        addFile() {
            this.submitType = 'add'
            this.dialogTableVisible = true
            this.fileList = []
            this.textarea = ''
            this.uploadParams = {
                remark: '',
                id: '',
                fileUrl: '',
            }
            this.fileChange = false
        },
        makeSure() {
            this.uploadParams.remark = this.textarea
            if(this.fileList.length === 0) {
                return this.$message.error('请上传附件')
            } else {
            if (this.submitType === 'edit' && !this.fileChange) {
                editRemark(this.uploadParams).then((res) => {
                    if (res.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success',
                        })
                        this.dialogTableVisible = false
                        this.getListData()
                    }
                })
            } else {
                this.$refs.upload.submit()
            }
        }

            // this.dialogTableVisible = false
        },
        downFile(row) {
            // window.open(
            //     '/api/studentservice/templateFile/downTemplate?fileUrl=' +
            //         row.fileUrl +
            //         '&fileName=' +
            //         row.fileName
            // )
            let url = '/api/studentservice/templateFile/downTemplate?fileUrl=' + row.fileUrl +  '&fileName=' + row.fileName
            stu.downTemplate(row.fileName, url);
        },
        getListData() {
            listTemplate(this.queryForm).then((res) => {
                if (res.code === 200) {
                    this.dataList = res.data.list
                    this.queryForm.total_ = res.data.total_
                }
            })
        },
        handleRemove(file, fileList) {
            this.fileChange = false
            this.fileList = []
        },

        handleExceed(files, fileList) {
            this.$message.error(`当前限制上传 1 个文件`)
        },
        handleChange(file, fileList) {
            this.fileList = fileList
            this.fileChange = true
        },
        beforeUpload(file) {
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
            const uploadFlag =
                fileType === 'xls' ||
                fileType === 'xlsx' ||
                fileType === 'docx' ||
                fileType === 'doc' ||
                fileType === 'pdf'
            const isLt2M = file.size / 1024 / 1024 < 10
            let checkFileName = true
            if (file.name.indexOf('%') !== -1) {
                checkFileName = false
            } else if (file.name.indexOf('&') !== -1) {
                checkFileName = false
            } else if (file.name.indexOf('_') !== -1) {
                checkFileName = false
            } else if (file.name.indexOf('?') !== -1) {
                checkFileName = false
            }

            if (!uploadFlag) {
                this.$message.error('请按要求上传文件!')
            }
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过 10MB!')
            }
            if (!checkFileName) {
                this.$message.error('文件名称包含特殊字符，请重命名后重新上传!')
            }
            return uploadFlag && isLt2M && checkFileName
        },
        handleError() {
            this.fileChange = false
        },
        handleSuccess(res, file) {
            if (res.code === 200) {
                this.$message({
                    message: '上传成功',
                    type: 'success',
                })
                this.fileChange = false
                this.dialogTableVisible = false
                this.getListData()
            }
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.getListData()
        },
    },
}
</script>